<template>
    <div>
        <el-table :data="circleTableData" border style="width:100%" row-key="id" @row-click="showCircleDetail">
            <el-table-column prop="name" label="名称" width="150px">
            </el-table-column>
            <el-table-column prop="" label="头像" width="150px">
                    <template slot-scope="scope">
                        <img style="height:50px;width:50px;" :src="scope.row.avatar"/>
                    </template>
            </el-table-column>
            <el-table-column prop="number" label="参与人数" width="150px">
                
            </el-table-column>
            <el-table-column prop="dayPost" label="当日发帖数" width="250px">
                
            </el-table-column>
            <el-table-column  label="操作" width="250px">
                <!-- 查看圈子 编辑圈子 无法查看圈子 入口隐藏 -->
                <template slot-scope="scope">
                        <!--<el-button type="text" size="small">查看圈子</el-button>-->
                        <el-button type="text" size="small" @click="updateCircle(scope)">编辑圈子</el-button>
                        <el-button type="text" size="small">隐藏圈子</el-button>
                </template>
            </el-table-column>
        </el-table>
         <p style="padding-left:5px;">
            <el-button type="primary" @click="newCircle">新建圈子</el-button>
            <el-pagination  background layout="prev, pager, next" :total="100" @current-change="getPageData"></el-pagination>   
         </p>
         <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="initData" width="30%">
             <el-form  :model="circle" label-width="80px">
                <el-form-item label="圈子名称">
                    <el-input v-model="circle.name"></el-input>
                </el-form-item>
                <el-form-item label="圈子头像">
                    <el-upload action =""  :before-upload="handleBeforeUpload"   :limit="1">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="圈子简介">
                    <el-input v-model="circle.introduce" type="textarea" :rows="5" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createCircle">立即创建</el-button>
                    <el-button @click="closeCircleDialog">取消</el-button>
                </el-form-item>
            </el-form>
         </el-dialog>
    </div>
 
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
    data(){
       return {
           page:1,
           dialogVisible:false,
           title:'新建圈子',
           circle: {
                id:'',
                name:'',
                introduce:'',
                file:''
           }
       }
   },
   methods:{
      showCircleDetail(row, column, cell, event){
        if(cell.label != '操作'){
            this.$store.dispatch('getCircleMoment',row.id)
        }else{
            //点击刷新右侧动态栏目
            var data = new Object();
            this.$store.dispatch('changeCircleData',data)
        }
      },
      updateCircle(data){
          this.circle.id=data.row.id;
          this.circle.name=data.row.name;
          this.circle.introduce=data.row.introduce;
          this.title="编辑圈子";
         this.dialogVisible = true;
      },
      createCircle(){
          var data = new FormData();
          data.append("id",this.circle.id);     
          data.append("pic",this.circle.file);
          data.append("name",this.circle.name);
          data.append("introduce",this.circle.introduce);
          this.$store.dispatch('createCircle',data);
      },
      handleBeforeUpload(file){
          this.circle.file = file;
          return false;
      },
      initData(done){
          this.circle.id="";
          this.circle.name="";
          this.circle.introduce="";
          this.circle.file="";    
          done();
      },
      closeCircleDialog(){
          this.dialogVisible= false;
          this.circle.id="";
          this.circle.name="";
          this.circle.introduce="";
          this.circle.file="";    
      },
      getPageData(page){
           this.$store.dispatch('getCircleTable',page)
      },
      newCircle(){
          this.dialogVisible = true
           this.title="新建圈子";
      }
   },
   computed:{
    ...mapGetters({
        circleTableData: 'getCircleTable'
    })
   },
   created(){
     this.$store.dispatch('getCircleTable',this.page)
   }
}
</script>
<style scoped>
    .el-pagination{
        float: right;
    }
</style>
